import { useTranslation } from 'react-i18next'
import React, { useState, forwardRef, useCallback, useImperativeHandle,useContext } from 'react';
import { Button, Drawer, Checkbox, Form, Select } from 'antd';
import { ThemeContext } from './theme';
const Setting = forwardRef((props, ref) => {
  const [open, setOpen] = useState(false);
  const [checked, setChecked] = useState(false);
  const { t, i18n } = useTranslation()
  const  theme  = useContext(ThemeContext);
  console.log(theme)
  const showDrawer = useCallback(() => {
    setOpen(true);
  }, []);
  useImperativeHandle(ref, () => ({
    showDrawer
  }));
  const onClose = () => {
    setOpen(false);
  };
  const adjustSize = (e) => {
    if (e.target.checked) {
      let width = document.body.clientWidth;
      let height = document.body.clientHeight;
      console.log(width, height)
      props.adjustSize(width, height);
      setChecked(true)
    } else {
      props.adjustSize();
      setChecked(false)
    }
  }
  const handleChange = (value) => {
    i18n.changeLanguage(value);
  };
  const changeTheme = (value) => {
    props.changeTheme(value);
  };
  return (
    <Drawer title={t('设置')} onClose={onClose} open={open}>
      <Form layout="horizon">
        <Form.Item label={t('当前语言')} style={{color:theme.color}}>
          <Select
            defaultValue="zh"
            style={{ width: 120 }}
            onChange={handleChange}
            options={[
              { value: 'zh', label: 'zh-CN' },
              { value: 'en', label: 'en-US' }
            ]}
          />
        </Form.Item>
        <Form.Item label={t('当前主题')}>
          <Select
            defaultValue={props.theme}
            style={{ width: 120 }}
            onChange={changeTheme}
            options={[
              { value: 'light', label: 'light' },
              { value: 'dark', label: 'dark' },
            ]}
          />
        </Form.Item>
      </Form>
    </Drawer>
  )
})

export default Setting
